<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>

</head>

<body data-type="index">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <jsp:include page="common/header.jsp"></jsp:include>
        <!-- 风格切换 -->
        
        <!-- 侧边导航栏 -->
        <jsp:include page="common/memu.jsp"></jsp:include>


        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">

            <div class="row-content am-cf">
                <div class="row  am-cf" id="cardDiv">

                </div>

               

 <div class="am-u-sm-12 am-u-md-12 am-u-lg-6">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">最近十笔流水</div>
                                <div class="widget-function am-fr">
                                    
                                </div>
                            </div>
                            <div class="widget-body  widget-body-lg am-fr">

                                <table width="100%" class="am-table am-table-compact am-table-bordered am-table-radius am-table-striped tpl-table-black " id="example-r">
                                    <thead>
                                        <tr>
                                            <th>卡号</th>
                                            <th>金额</th>
                                            <th>备注</th>
                                            <th>时间</th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody id="top10Flows">
                                        <tr class="gradeX">
                                            <td>6222*****196</td>
                                            <td>200.00</td>
                                            <td>存款</td>
                                            <td>2017-11-26</td>
                                        </tr>
                                        <!-- more data -->
                                    </tbody>
                                </table>

                            </div>
                        </div>
                    </div>
                </div>



            </div>
        </div>
    </div>
    </div>
    <script src="assets/js/amazeui.min.js"></script>
    <script src="assets/js/amazeui.datatables.min.js"></script>
    <script src="assets/js/dataTables.responsive.min.js"></script>
    <script src="assets/js/app.js"></script>

    <script>

        //自执行函数  浏览器加载页面后，就会自动执行
        (function loadMyCard() {
            $.get("/card", {
                action : 'queryCards',
                userId : 1002
            }, function (xx) {
                if (xx.code != 1000) {
                    alert(xx.message);
                    return;
                }

                var msg = '';
                var cards = xx.data;
                for (var i=0; i<cards.length; i++) {
                    var card = cards[i];
                    msg += '<div class="am-u-sm-12 am-u-md-6 am-u-lg-4">\n' +
                        '                        <div class="widget widget-primary am-cf">\n' +
                        '                            <div class="widget-statistic-header">\n' +
                        '                                '+card.cardNum+'\n' +
                        '                            </div>\n' +
                        '                            <div class="widget-statistic-body">\n' +
                        '                                <div class="widget-statistic-value">\n' +
                        '                                    ￥'+card.balance+'\n' +
                        '                                </div>\n' +
                        '                                <div class="widget-statistic-description">\n' +
                        '                                    \n' +
                        '                                </div>\n' +
                        '                                <span class="widget-statistic-icon am-icon-credit-card-alt"></span>\n' +
                        '                            </div>\n' +
                        '                        </div>\n' +
                        '                    </div>';
                }

                $('#cardDiv').html(msg)
            });
        })();

        function loadTop10Flows() {
            $.get("/flow", {
                action : 'top10'
            }, function (xx) {
                if (xx.code != 1000) {
                    alert(xx.message);
                    return;
                }

                var msg = '';
                var flows = xx.data;
                for (var i=0; i<flows.length; i++) {
                    var flow = flows[i];
                    msg += '<tr class="gradeX">\n' +
                        '                                            <td>'+flow.cardNum+'</td>\n' +
                        '                                            <td>'+flow.amount+'</td>\n' +
                        '                                            <td>'+flow.remark+'</td>\n' +
                        '                                            <td>'+flow.createTime+'</td>\n' +
                        '                                        </tr>';
                }

                $('#top10Flows').html(msg)
            });
        }

        //浏览器加载页面时，就会执行此函数
        loadTop10Flows();

        //自执行函数
        (function () {
            console.log(99999);
        })()

        $('#indexA').addClass("active")
    </script>

</body>

</html>